<template>
  <view class="container">

    <!--轮播图-->
    <banner v-if="bannerList.length > 0" :previous-margin="0" :next-margin="0" :height="250" :banner-list="bannerList" />

    <u-gap height="20px" />

    <u-grid col="2" :custom-style="{'justify-content': 'space-around'}">
      <u-grid-item v-for="(item, index) in menuListBig" :key="index" :custom-style="{'width': '48%','align-items': 'start'}" @click="open">
        <image :src="item.icon" mode="widthFix" shape="square" />
        <view class="grid_big_title">
          <view :style="[{color: item.id == 1 ? '#ffffff': '#704232'}]" class="name">{{ item.name }}</view>
          <view class="desc">{{ item.desc }}</view>
        </view>
      </u-grid-item>
    </u-grid>

    <u-gap height="40rpx" />

    <!--宫格菜单按钮-->
    <u-grid v-if="menuList.length > 0" col="4">
      <u-grid-item v-for="(item, index) in menuList" :key="index" @click="open">
        <image class="grid-img" :src="item.icon" />
        <text class="grid-title">{{ item.name }}</text>
      </u-grid-item>
    </u-grid>

  </view>
</template>

<script>
import banner from '@/components/Banner/banner'
import { sign, appSettingList } from '@/api/api1'
export default {
  components: {
    banner
  },
  data() {
    return {
      bannerList: [],
      menuList: [],
      menuListBig: [],
      noticeList: [],
      couponList: [],
      proMmFlag: false,
      proXglFlag: false
    }
  },
  watch: {},
  onLoad() {
    this.loadData()
  },
  onPullDownRefresh() {
    this.loadData()
  },
  onShow() {
  },
  onReachBottom() {
  },
  methods: {
    loadData() {
      appSettingList({ type: 2, status: true }).then(res => {
        this.menuList = res.data
        this.menuListBig = [
          {
            id: 1,
            name: '会员卡',
            desc: '查看您的专属权益',
            icon: 'https://mm.wentsoft.com/static/images/vip_backgroud_1.png',
            link: '/pages/users/myCard/myCard'
          },
          {
            id: 2,
            name: '券中心',
            desc: '商城领券优惠',
            icon: 'https://mm.wentsoft.com/static/images/vip_backgroud_2.png',
            link: '/pages/coupon/index'
          }
        ]
      })
      appSettingList({ type: 1, status: true }).then(res => {
        this.bannerList = res.data.map(item => {
          return {
            id: item.id,
            title: item.name,
            url: item.icon
          }
        })
      })
    },
    open(i) {
      if (!this.$store.getters.hasLoginAndHasMallInfo) {
        return uni.$u.route('/pages/users/login/index')
      }
      if (this.menuList[i].link.split('/').splice(-2)[0] === 'sign') {
        // 签到
        sign({ mobile: this.$store.getters.userInfo.phone }).then(res => {
          if (!res) return
          uni.$u.toast('签到成功')
        })
        return
      }
      uni.$u.route(this.menuList[i].link)
    }
  }
}
</script>

<style lang="scss" scoped>
.grid_big_title {
  position: absolute;
  left: 50rpx;
  z-index: 999;
  .name {
    font-size: 32rpx;
    line-height: 20px;
  }
  .desc {
    font-size: 18rpx;
    line-height: 25px;
    color: #98837b;
  }
}

.search-wrap {
  background: $custom-bg-color;
  padding: 20rpx;
}

.grid-img {
  width: 80rpx;
  height: 80rpx;
}
.grid-title {
  line-height: 50rpx;
  font-size: 24rpx;
}
</style>
